<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>显示活动列表</title>
    <link href="<%=path%>/favicon.ico" rel="shortcut icon">
	<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" />
	<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">  
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <style>
    	#qrcode img{
	    	width:100%;
	    	border:5px solid #fff;
    	}
    	.ui-dialog-footer button.ui-dialog-autofocus{background-color: #18a689;border-color: #18a689;}
    	.chance{
    			padding-left:0;
    			border: 1px solid #eee;
    			width:260px;
    			height:80px;
    			float:left;
    			margin-left: 10px;
    			margin-bottom:20px;
    		}
    	.click_chance{
    		background: url(../../../images/marketing/choose.png) no-repeat 0 0;
    		background-size:25px;
    		border:1px solid #31B99B;
    	}
    	.chance:hover{
    		background: url(../../../images/marketing/choose.png) no-repeat 0 0;
    		background-size:25px;
    		border:1px solid #31B99B;
    		}
    	.bj_btn,.qd_btn,.qx_btn{
            cursor: pointer;
        }
    </style>
</head>
<body style="background: #fff;">
   <!-- 推送活动 -->
       <%--   <div class="m_xpropell">
            <div class="wire"></div>
            <div class="title"><i class="J_xsutup"><img id="bm_ca1" src="<%=path%>/images/close.png" /></i>选择推送活动</div>
            <div class="m_xswung">
                <div class="caption">
                    <span>活动概览</span>
                    <span>活动标签</span>
                    <span>统计值</span>
                    <span>状态</span>
                </div>
                <ul class="flexibe" id="activity_list">
                	
                	
                </ul>
                <div class="m_xpages">
					<div class="mian">
						<span>显示行数</span> <select><option>5</option>
							<option>10</option>
							<option>20</option></select> <span class="bm_tiao">共80条</span> <span class="bm_ye">1/4页</span> <a
							href="javascript:;" class="prev">上一页</a> <a href="javascript:;"
							class="next">下一页</a> <span>前往</span> <input type="text" value="1"
							class="text"> <span>页</span>
					</div>
				</div>
                <div class="m_xbutton m_xfinish">
                    <a href="javascript:;" class="white" id="bm_ququxiao">取消</a>
                    <a href="javascript:;" onclick="childFinish()" id="bm_wanwa">完成</a>
                </div>
            </div>
        </div> --%>
        <div class="wrapper wrapper-content">
        	<div class="row" style="margin-top:-20px;">
        		<div class="form-group col-sm-2" style="float:left;">
					<input class="form-group form-control" id="key_words" style="min-width: 100px;" placeholder="请输入关键字"/>							  			
				</div>
				<div class="form-group col-sm-2" style="float:left;margin-left:-30px;">
				<button class="btn btn-primary col-sm-1"  type="button" onclick="getActivityList()"><i class="fa fa-search"></i>搜索</button>
				</div>
			<div class="row" style=" overflow:auto; width:600px;height:350px;margin-left:5px;" >
				<div id="tbody">
				</div>
				<!-- <div class="chance">
					<dl class="k_img_box"style="margin:20px; ">
					<dt><img style="width: 80px;height: 60px;float:left;" ></dt>
					<dd ><span style="margin-left:10px;">0元换新</span></dd>
					<dd style="height:20px;"></dd>
					<dd ><span style="margin-left:10px;">2017-12-14</span></dd>
					</dl>
				</div>
				<div class="chance" style="margin-left:100px;">
					<dl class="k_img_box"style="margin:20px;">
					<dt><img style="width: 80px;height: 60px;" ></dt>
					</dl>
				</div>
				<div class="chance">
					<dl class="k_img_box"style="margin:20px;">
					<dt><img style="width: 80px;height: 60px;" ></dt>
					</dl>
				</div>
				<div class="chance" style="margin-left:100px;">
					<dl class="k_img_box"style="margin:20px;">
					<dt><img style="width: 80px;height: 60px;" ></dt>
					</dl>
				</div>
				<div class="chance">
					<dl class="k_img_box"style="margin:20px;">
					<dt><img style="width: 80px;height: 60px;" ></dt>
					</dl>
				</div> -->
				<div style="float:left; margin-left: 40px;">
					<div class="m_xpages" style="padding:0 0 0 0">
						<div class="mian">
							<!-- <span>显示行数</span> <select><option>6</option>
								<option>10</option>
								<option>20</option></select> --> <span class="bm_tiao"></span> <span class="bm_ye">1/4页</span> <a
								href="javascript:;" class="prev">上一页</a> <a href="javascript:;"
								class="next">下一页</a> <span>前往</span> <input type="text" value="1"
								class="text"> <span>页</span>
						</div>
						
			<div class="row">
				<div class="form-group" style="margin-top:50px;">
					<div class="form-group col-sm-1" style="float:left; margin-left: 200px;">
					<button class="btn btn-outline btn-primary col-sm-1"  type="button" id="colse">取消</button>
					</div>
					<div class="form-group col-sm-1" style="float:left;">
					<button class="btn btn-primary col-sm-1"  type="button" id="commit">确定</button>
					</div>
				</div>
			</div>
					</div>
				</div>				
			</div>
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/InputLimitedByidandlength.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
    <script>   
    var access_token=$.cookie('access_token');
    var cid=$.cookie('cid');
    var uid=$.cookie('uid');
    var key_word="";
 	//分页
    var startIndex = 0;
    var pageSize = 4;
    var currentPage = 1;
    var pageCount = 0;
    
    $(function(){
 	   getActivityList();
    });
    function getActivityList(){
    	//获取关键字
       	key_word = $('#key_words').val();
       	var url = "<%=path%>/activity/ajaxActivityPageList";
       	$.post(url,{
       			"access_token" : access_token,
    			"cid" : cid,
    			"uid" : uid,
    			"name" : key_word,
    			"startIndex" : startIndex,
    			"pageSize" : pageSize ,
    			"status":1,
    			"distinction":0,
       	},function(data){
       		 var datas=data.data;
       		if(data.status == 200){
       			page(data.totalCount);
       			activityHtml(data.data);
       		}else if(data.status == 1){
       			activityHtml(0);
       		}        		
       	});
    }
    function activityHtml(data){
    	var html = "";
    	for (var i= 0;i<data.length;i++) {
			if(i%2==0){
				html+='<div class="chance" ac_name='+data[i].name+' ac_url='+data[i].webUrl+'>';	
			}else{
				html+='<div class="chance" ac_name='+data[i].name+' ac_url="'+data[i].webUrl+'" style="margin-left:40px;">';
			}
			html+='<dl class="k_img_box"style="margin-left:30px; margin-top:10px;">';
			html+='<dt><img style="width: 70px;height: 50px;float:left;" src='+data[i].headPic+'></dt>';
			html+='<dd ><span style="margin-left:20px;">'+data[i].name+'</span></dd>';
			html+='<dd style="height:20px;"></dd>';
			var endTime="无有效期";
			if(StringEmpty(data[i].endTime)){
				endTime=data[i].endTime;
			}
			html+='<dd ><span style="margin-left:20px;">'+endTime+'</span></dd>';
			html+='</dl></div>';
		}
    	$("#tbody").html(html);
        $(".chance").click(function(){
        	$(this).addClass("click_chance");
        	$(this).siblings().removeClass("click_chance");;
        });
    }
    $("#colse").click(function(){
    	parent.activityDetailDialog.close();
    });
    $("#commit").click(function(){
    	var name=$(".click_chance").attr("ac_name");
    	var url=$(".click_chance").attr("ac_url");
    	parent.$("#activity_url").val(url);
    	parent.$("#activity_name").val(name);
    	parent.activityDetailDialog.close();
    });
    /* 分页 */
    $(".m_xpages select").change(function(){
 		pageSize = Number($(this).val());		
 		getActivityList();
 	});
 	
    $(".m_xpages a.prev").click(function(){	 		
 		$('.next').html('<font color="black">下一页</font>');
 		if(currentPage > 1){
 			currentPage--;
 			startIndex -= pageSize;	 
 			if(currentPage == 1){
	 			$('.prev').html('<font color="#E0E0E0">上一页</font>');
 			}
	 			getActivityList();
 		}
 	});
 	$(".m_xpages a.next").click(function(){
 		$('.prev').html('<font color="black">上一页</font>'); 
 		if(currentPage < pageCount){
 			currentPage++;
 			startIndex += pageSize;
 			if(currentPage == pageCount){
	 			$('.next').html('<font color="#E0E0E0">下一页</font>');
	 		}
	 			getActivityList();
 		}
 	});
 	
 	$(".m_xpages :text").keyup(function(e){
		if(e.keyCode==13){
			var pageGo = $(this).val();
			if(/^[0-9]+$/.test(pageGo)){
				pageGo = Number(pageGo);
				if(pageGo<1 || pageGo>pageCount){
					func_artdialog("提示",'页数不存在！');
				}else if(pageGo != currentPage){
					startIndex = (pageGo -1) * pageSize ;	
					getActivityList();
				}
			}else{
				func_artdialog("提示","请输入合法页数！");
			}
		}
	});
 	//自定义弹框
  	function func_artdialog(name,value){
 		var d = dialog({
 			title: name,
 			fixed: true,
 			width: 200,
 	        height:100,
 			content:"<center style='font-size:20px; line-height:100px;'>"+value+"</center>",
 			okValue: "确定",
 			ok: function () {
 				return true;
 			}
 		});
 		d.show();
 	}
 	function page(totalCount) {
		pageCount = totalCount/pageSize;
		var count=totalCount % pageSize;
 		if (count>0){
 			pageCount++;
 		}
 		pageCount = parseInt(pageCount);
 		currentPage =  startIndex / pageSize + 1;
 		currentPage = parseInt(currentPage);
 		
 		if(currentPage == 1){
 			$(".prev").addClass("pageDisable");
 		}else{
 			$(".prev").removeClass("pageDisable");
 		}
 		
 		if(currentPage == pageCount || pageCount == 0){
 			$(".next").addClass("pageDisable");
 		}else{
 			$(".next").removeClass("pageDisable");
 		}
 		
 		$(".m_xpages>.mian>span:eq(1)").text('共'+totalCount+'条');
 		$(".m_xpages>.mian>span:eq(2)").text(currentPage+'/'+pageCount+'页');
	}
    
</script>
</body>
</html>